<!-- 申请退款、申请退货退款 -->
<template>
  <PublicPage :pageName="postParams.applyType === 2 ? '申请退货退款' : '申请退款'" :borderType="true" :showNav="true">
    <view class="aftersale">
      <!-- 商品信息 -->
      <view class="bgf" style="box-shadow: inset 0px -1px 0px #eeeeee">
        <view
          class="goodsBox"
        >
          <view class="u-flex">
            <image
              class="goodsImage"
              :src="goods.goodsImages"
            />
            <view class="goodsMsg">
              <view class="name">{{ goods.goodsName }}</view>
              <view class="outh">数量：{{ goods.count || 0}}<text class="u-padding-left-20">{{goods.skuName}}</text></view>
              <view class="plice justify-between">
                <!-- 商品单价 -->
                <view class="themeFontColor">￥{{ goods.oneSalePrice || '0.00' }}</view>
                <view class="zidingyi">
                  <u-number-box v-model="postParams.count" :max="goods.count" :step="1" :min="1"></u-number-box>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 退款信息 -->
      <view class="bgf">
        <view class="px32 linh-48 fz-16 fw5">退款信息</view>
        <view class="justify-between px32 linh-48">
          <view class="fz-16 fw5">退款金额</view>
          <view class="themeFontColor">￥{{goods.id ? postParams.count * goods.oneSalePrice : '0.00'}}</view>
        </view>
        <view class="justify-between px32 linh-48" @click="_openReason()">
          <view class="fz-16 fw5">申请原因</view>
          <view :class="postParams.applyReason? '' : 'viceColor'">{{comparedValue(aftersaleReason,postParams.applyReason) || '请选择'}}<u-icon name="arrow-right"></u-icon></view>
        </view>
        <view class="px32 u-p-t-20">
          <u-input v-model="postParams.description" type="textarea" height="250" :maxlength="150" placeholder="请输入补充申请理由便于团长快速处理哦~" auto-height />
          <view style="text-align: right;color:#DCDEE0;" class="fz-12 u-p-b-20">{{postParams.description.length || 0}}/150</view>
        </view>
        <view class="px32">
          <UpImage :limit="9" :imageList="postParams.pictureJson" @upSuccess="_imageUpSuccess" @remove="_ImageRemove" @loading="_loadingFn" />
        </view>
      </view>

      <view class="bgf posfixed">
        <view>共退款：</view>
        <view class="themeFontColor">￥{{goods.id ? postParams.count * goods.oneSalePrice : '0.00'}}</view>
        <button class="configBtn themeBgColor" @click="_seveApplication">提交申请</button>
      </view>

      <AftersaleReason :show="reasonShow" @close="reasonShow = false" @config="_reasonChange"></AftersaleReason>

      <u-modal v-model="seveReasonsShow" show-cancel-button confirm-text="提交申请" confirm-color="#E44435" title="确认提交申请" :title-style="{lineHeight: '44rpx',paddingBottom: '16rpx'}" @confirm="_configClose">
        <view class="justify-between u-p-l-32 u-p-r-32 u-p-b-40">
          <view class="ov2 fz-14 viceColor " style="flex:1;">
            {{goods.goodsName}}
          </view>
          <view class="flex-col items-center">
            <view class="fz-14 themeFontColor">￥{{postParams.count * goods.oneSalePrice}}</view>
            <view class="fz-12 viceColor">仅退款</view>
          </view>
        </view>
      </u-modal>
    </view>
  </PublicPage>
</template>
<script>

import HeadNav from "@/components/headNav/index.vue";
import PublicPage from "@/components/publicPage/index.vue";
import UpImage from '@/components/upImage/index.vue';
import orderApi from "@/api/orderApi.js";
import AftersaleReason from "./aftersaleReason.vue";
import { comparedValue, aftersaleReason } from "@/utils/statusList"

export default {
  components: {
    HeadNav,
    PublicPage,
    UpImage,
    AftersaleReason
  },
  computed: {
    aftersaleReason(){
      return aftersaleReason
    },
  },
  data() {
    return {
      postParams: {
        orderGoodsId: '',
        applyType: 1, //申请类型1退款不退货2退货退款
        count: 1, // 售后商品数量
        applyReason: '', // 申请原因1多拍、错拍、不想要;2没时间去拿;3大小尺寸与商品描述不符;4收到商品少件、破损或污渍;5团长未发货;6团长缺货;7不喜欢、效果不好;8材质、面料与商品描述不符;9质量问题;10其他
        description: '', // 补充描述
        pictureJson: [], // 图片集合
      },
      goods: {},
      reasonShow: false,
      seveReasonsShow: false,
      upLoadgin: false
    }
  },
  async onLoad(options){
    if(!options.orderAllId || !options.goodsId) return 
    this.postParams.applyType = Number(options.applyType)
    this.postParams.orderGoodsId = options.goodsId
    const { data } = await orderApi.myBuyOrderListDetails({orderAllId: options.orderAllId})
    data.orderGoodsDetailsRespVOList.forEach(v=>{
      if(v.id === options.goodsId){
        this.goods = v
      }
    })
  },
  methods: {
    comparedValue,
    // 打开申请原因弹窗
    _openReason(){
      this.reasonShow = true
    },
    // 选择原因
    _reasonChange(item){
      this.postParams.applyReason = item.value
    },
    // 图片上传成功
    _imageUpSuccess(upImgList){
      this.postParams.pictureJson = [...this.postParams.pictureJson,...upImgList]
    },
    _ImageRemove(index){
      this.postParams.pictureJson.splice(index, 1)
    },
    _loadingFn(status){
      this.upLoadgin = status
    },
    // 提交申请
    _seveApplication(){
      if(!this.postParams.applyReason){
        uni.showToast({
          title: '请选择申请原因',
          icon: 'none'
        });
        return
      }else if(this.upLoadgin){ // 图片上传中
        return
      }
      this.seveReasonsShow = true
    },
    // 确定提交申请
    _configClose(){
      let imgList = this.postParams.pictureJson.map(v=>{
        return v.url
      })
      let params = JSON.parse(JSON.stringify(this.postParams))
      params.pictureJson = imgList.length && imgList.join(',')
      orderApi.addOrderAfterSales(params).then(res=>{
        if(res.data){
          this.redirectTo({url: `/pagesA/order/myAftersaleDetails?orderAfterSalesId=${res.data}`});
        }else{
          this.navigateBack();
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.aftersale {
  height: calc(100% - 120rpx);
  overflow: auto;
  .bgf{
    background-color: #FFF;
  }
  .px32{
    padding: 0 32rpx;
    box-shadow: inset 0px -1px 0px #EEEEEE;
  }
  .ov2{
    @include bov(2);
  }
  .goodsBox {
    padding: 32rpx;
    .goodsImage {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    .goodsMsg {
      flex: 1;
      .name {
        width: 500rpx;
        color: rgba(0, 0, 0, 0.9);
        @include toe();
      }
      .outh {
        color: #969799;
        font-size: 24rpx;
        padding-top: 16rpx;
      }
      .plice {
        padding-top: 32rpx;
      }
    }
  }
  .posfixed{
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
  	justify-content: flex-end;
    align-items: center;
    padding: 30rpx 32rpx;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  }
  .configBtn{
    color: #FFF;
    line-height: 60rpx;
    width: 160rpx;
    height: 60rpx;
    font-size: 28rpx;
    border-radius: 8rpx;
    text-align: center;
    margin-left: 20rpx;
  }
}
</style>
<style scoped>
.zidingyi >>> .u-icon-minus{
  background-color: #FFF !important;
  border: 1px solid #E44435;
  color: #E44435 !important;
}
.zidingyi >>> .u-icon-plus{
  background-color: #E44435 !important;
  border: 1px solid #E44435;
  color: #FFF !important;
}
</style>